<template>
  <div>
    <a-card title="工单来源渠道分析" :bordered="false" :headStyle="{ padding: '0 15px', border:0}" style="width:100%">
      <a-row>
        <a-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
          <ve-bar :data="sheetCountData" :settings="chartSettings" :judge-width="true" :extend="chartExtend" height="200px"></ve-bar>
        </a-col>
        <a-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
          <ve-radar :data="statisticsData" :extend="radarExtend" height="200px"></ve-radar>
        </a-col>
      </a-row>
    </a-card>
  </div>
</template>

<script>
// import { getMcaCount } from '@/api/performance'
export default {
  name: 'ChannelAnalysis',
  components: {
  },
  data () {
    return {
      chartExtend: {
        grid: {
          top: '15%',
          left: '1%',
          right: '3%',
          bottom: '5%',
          containLabel: true
        }
      },
      radarExtend: {
        title: {
          // text: '系统资源',
          x: 'center',
          y: '-5px',
          textStyle: {
            fontSize: 14,
            color: '#333'// 主标题文字颜色
          }
        },
        radar: {
          splitArea: {
            show: false
          },
          splitLine: { // (这里是指所有圆环)坐标轴在 grid 区域中的分隔线。
            lineStyle: {
              color: '#d9d9d9',
              // 分隔线颜色
              width: 1
              // 分隔线线宽
            }
          },
          axisLine: { // (圆内的几条直线)坐标轴轴线相关设置
            lineStyle: {
              color: '#999',
              // 坐标轴线线的颜色。
              width: 1,
              // 坐标轴线线宽。
              type: 'solid'
              // 坐标轴线线的类型。
            }
          },
          shape: 'circle',
          center: ['50%', '50%'],
          radius: 50
        },
        series: {
          tooltip: {
            trigger: 'item'
          },
          areaStyle: { // 单项区域填充样式
            normal: {
              color: 'rgba(255,0,0,0.6)' // 填充的颜色。[ default: "#000" ]
            }
          }
        }
      },
      chartSettings: {
        dimension: ['排名'],
        metrics: ['工单数量']
      },
      sheetCountData: {
        columns: ['排名', '工单数量'],
        rows: [
          { '排名': '其他', '工单数量': 1393 },
          { '排名': '邮件', '工单数量': 3530 },
          { '排名': '官网', '工单数量': 2923 },
          { '排名': 'APP', '工单数量': 1723 },
          { '排名': '电话', '工单数量': 3792 },
          { '排名': '微信', '工单数量': 4593 }
        ]
      },
      statisticsData: {
        columns: ['渠道', '其他', '邮件', '官网', 'APP', '电话', '微信'],
        rows: [
          { '渠道': '统计情况', '其他': 1393, '邮件': 1093, '官网': 32, 'APP': 132, '电话': 132, '微信': 132 }
        ]
      }
    }
  },
  created () {
  },
  mounted () {
    // this.getalArmHandleRate()
    // 轮询接口
    const timers = window.setInterval(() => {
      setTimeout(res => {
      }, 0)// 利用定时器清除setInterval的每次叠加
    }, 60000)// 1分钟执行一次
    // this.once在离开当前路由时销毁定时器
    this.$once('hook:beforeDestroy', () => {
      clearInterval(timers)
    })
  },
  /**
   * 数字格式化为千分位
   */
  filters: {
    format: function (value) {
      return value.toLocaleString()
    }
  },
  methods: {
    /**
     * 相应处置率
     */
    getalArmHandleRate () {
      // 告警处置率
    }
  }
}
</script>
<style lang="less" scoped>
  .ant-card{
    /deep/.ant-card-body{
      padding:0 15px 15px 15px;
    }
  }
</style>
